<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>Insert title here</title>
	 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	 <!-- <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
	 <script th:src="@{/js/bootstrap.min.js}"></script>  
	 <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"></link> -->
	 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
	 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	 <script th:src="@{/js/poper.min.js}"></script>
	 <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	 <link th:href="@{/css/common.css}" rel="stylesheet">
	 <link th:href="@{/css/index.css}" rel="stylesheet">
 <style>
 	 
 </style>
</head>
<body>
	
	<div class="container-flud">
		<div class= "header">
			<div class="container">
				<div class="row  topbar">
					 <div class="col">
						 <ul class="nav">
							 <li  class="nav-item"><a class="nav-link">移动端</a></li>
							 <li class="nav-item"><a class="nav-link">加入收藏</a></li>
							 <li class="nav-item"><a class="nav-link">分享</a></li>
						 </ul>
					 </div>
					  <div class="col">
						  <ul class="nav" style="float:right">
							  <li class="nav-item"><a class="nav-link">没有账号？点击注册</a></li>
							  <li class="nav-item"><a class="nav-link" th:href="@{/login/qq}">登录</a></li>
						  </ul>
					  </div>
				</div>
				<div class="row  banner">
					<div class="col-md-3">
						<h1>
							<a>
									<img src="http://asset.ibanquan.com/asset/5a93cf743f8f9065af000010/logo?v=1519636340"/>
							</a>
						</h1>
					</div>
					<div class="col-md-6"></div>
					<div class="col-md-3"></div>
				</div>
				<div class="row navHeader">
					<div class="col">
						<ul class="nav">
							<li th:class="${#lists.isEmpty(item.child)}?'nav-item dropdown':nav-item" th:each="item : ${data.nav}">
									<a th:if="${not #lists.isEmpty(item.child)}" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">外设</a>
									<div th:if="${not #lists.isEmpty(item.child)}" class="dropdown-menu">
										<a class="dropdown-item" th:each="_item : ${item.child}" th:text="${_item.name}"></a>
									</div>
									<a th:if="${#lists.isEmpty(item.child)}" class="nav-link" th:text="${item.name}">test</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="content" class="container">
			<div class="row">
				<div class="col-md-9" style="padding-right:0;padding-bottom:5px;">
					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
						  <ol class="carousel-indicators">
						    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
						    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
						    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
						  </ol>
						  <div class="carousel-inner" role="listbox">
						   
						    <div th:class="${state.index == 0}?'carousel-item active':'carousel-item'" th:each="_item, state : ${data.contentPic.carousel}">
						    	<img th:src="${_item}" style="height:100%;width:100%"/>
						    </div>
						    
						  </div>
						  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
						    <span class="icon-prev" aria-hidden="true"></span>
						    <span class="sr-only">Previous</span>
						  </a>
						  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
						    <span class="icon-next" aria-hidden="true"></span>
						    <span class="sr-only">Next</span>
						  </a>
						</div>
				</div>
				
				
				
				<div class="col-md-3" style="padding-left:0;">
					<div class="row"  style="padding:5px;height:50%;">
						 <div class="col"  style="height:100%;width:100%">
							 <a href="#" style="height:100%;width:100%">
								<img src="http://asset.ibanquan.com/asset/5a2f791222bd3406c0001bda/index_slide_right_p1?v=1513060626" style="height:100%;width:100%">
							</a>
						 </div>
					</div>
					<div class="row" style="padding:5px;height:50%;">
						 <div class="col"  style="height:100%;width:100%">
							 <a href="#" style="height:100%;width:100%">
								<img src="http://asset.ibanquan.com/asset/5a2f791222bd3406c0001bda/index_slide_right_p1?v=1513060626" style="height:100%;width:100%">
							</a>
						 </div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col">
					<ol class="breadcrumb">
						<li><a><h3>新品上架</h3></a></li>
						
					</ol>
					<div class="row">
						<div class="col-md-3" th:each="item : ${data.categorys}">
							<div class="card">
								<img class="card-img-top" th:src="${item.pic}" alt="Card image cap">
								<div class="card-block">
									<h4 class="card-title" th:text="${item.title}">Card title</h4>
									<a href="#" class="" th:text="${item.price}">price</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<ol class="breadcrumb">
						<li><a><h3>新品上架</h3></a></li>
						
					</ol>
					<div class="row">
						<div class="col-md-3">
							<div class="card">
								<img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
								<div class="card-block">
									<h4 class="card-title">Card title</h4>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">price</a>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="card">
								<img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
								<div class="card-block">
									<h4 class="card-title">Card title</h4>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">price</a>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="card">
								<img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
								<div class="card-block">
									<h4 class="card-title">Card title</h4>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">price</a>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="card">
								<img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
								<div class="card-block">
									<h4 class="card-title">Card title</h4>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">price</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<ol class="breadcrumb">
						<li><a><h3>新品上架</h3></a></li>
						
					</ol>
					<div class="row">
						<div class="col-md-3">
							<div class="card">
								<img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
								<div class="card-block">
									<h4 class="card-title">Card title</h4>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">price</a>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="card">
								<img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
								<div class="card-block">
									<h4 class="card-title">Card title</h4>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">price</a>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="card">
								<img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
								<div class="card-block">
									<h4 class="card-title">Card title</h4>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">price</a>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="card">
								<img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
								<div class="card-block">
									<h4 class="card-title">Card title</h4>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
									<a href="#" class="btn btn-primary">price</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>


			<div class="row">
				<div class="col">
					<br>
					<br>
					<h1>说明</h1>
				</div>
			</div>

		</div>	
	</div>
</body>
</html>